<template>
    <button @click="alterList" v-if="select">+清单</button>
    <button @click="alterList" v-else class="select"><i class="iconfont">&#xe608;</i>清单</button>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'conmon-list',
        data () {
          return {
            select: true
          };
        },
        methods: {
          alterList () {
            this.select = !this.select;
          }
        }
    };
</script>

<style lang="stylus" scoped>
    button
      display inline-block; align-items center; margin-bottom 20px; min-width 50px; height 24px; font-size 12px; text-align center; color #747474; border-radius 12px; border 1px solid #BDBDBD;background transparent;
      i
       font-size 12px; color white
    button.select
      background #41B962; border-color #41B962; color #fff;
</style>
